<template>
  <div v-if="courseTableData.length > 1" style="margin-top: 15px;">
    <h3 class="title">课程完成情况</h3>
    <el-table
      :header-cell-style="tableHeaderStyle"
      :row-style="tableRowStyle"
      :data="courseTableData"
      :span-method="objectSpanMethod"
      :order="false"
      :pagination="false"
      :border="true"
      :selection="false"
      :stripe="false"
      style="width: 100%;"
    >
      <el-table-column
        label="课程类别"
        show-overflow-tooltip
        prop="labName"
        min-width="130px"
      ></el-table-column>
      <el-table-column
        label="课程代码"
        width="80"
        prop="courseCode"
      ></el-table-column>
      <el-table-column
        label="课程名称"
        prop="courseName"
        width="130"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="学分" prop="credits" width="50"></el-table-column>
      <el-table-column
        label="开课学院"
        prop="collegeI18n"
        width="80"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="是否必修" prop="compulsory" width="80">
        <template slot-scope="scope">
          <div>{{ scope.row.compulsory ? '是' : '否' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        prop="remark"
        show-overflow-tooltip
        width="100"
      ></el-table-column>
      <el-table-column label="选课情况" width="80">
        <template slot-scope="scope">
          <span>{{ +scope.row.selCourse == 1 ? '已选课' : '未选课' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成绩" width="60" prop="scoreLevel">
        <template slot-scope="scope">
          {{scope.row.scoreLevel || ''}}
        </template>
      </el-table-column>
      <el-table-column label="完成情况" width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isPass === 0 ? 'danger' : 'success'">
            {{ scope.row.isPass === 0 ? '未完成' : '已完成' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="替换课程代码"
        width="110"
        prop="replaceCourseCode"
      ></el-table-column>
      <el-table-column
        label="替换课程名称"
        show-overflow-tooltip
        prop="replaceCourseName"
      ></el-table-column>
    </el-table>
    <span style="margin:8px 0 0 32px;font-size:12px;font-weight:400">
      *其他类别课程为学生已修有成绩但不在培养计划内的课程
    </span>
  </div>
</template>
<script>
  export default {
    name: 'courseCompletionInfo',
    data() {
      return {
        courseTableData: [], //课程完成情况
        courseCompletionObj: {} //课程完成情况mapList数据
      };
    },
    methods: {
      tableHeaderStyle() {
        return 'background-color:#EEF7FF;font-weight:400;'
      },
      tableRowStyle({ row, rowIndex }) {
        if (rowIndex == this.courseTableData.length - 1) {
          return 'background-color:#EEF7FF;font-weight:400;'
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (row.isFirst) {
            return {
              rowspan: row.len,
              colspan: 1
            }
          } else if (rowIndex < this.courseTableData.length - 1) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
        if (rowIndex == this.courseTableData.length - 1) {
          if (columnIndex == 3) {
            return {
              rowspan: 1,
              colspan: 9
            }
          } else if (columnIndex == 0) {
            return {
              rowspan: 1,
              colspan: 3
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      },
      init(planCourseList = []) {
        if (!planCourseList.length) {
          this.courseTableData = [];
         return;
        }
        const result = _.sortBy(planCourseList, (item) => item.labID);
        let totalCredit = 0;
        result.forEach(item => {
          if (+item.labID === 8888) {
            item['labName'] = '其他'
          }
          totalCredit += item.credits
        });
        this.listToMap(result, 'courseCompletionObj')
        for (let key in this.courseCompletionObj) {
          let index = result.findIndex(item => item.labID == key)
          result[index].isFirst = true
          result[index].len = this.courseCompletionObj[key].length
        }
        result.push({ labName: '总学分', credits: totalCredit, isTotal: true });
        this.courseTableData = result;
      },
      listToMap(planCourseList, key) {
        if (!planCourseList || !planCourseList.length) {
          return;
        }
        this[key] = planCourseList.reduce((pre, cur) => {
          return {
            ...pre,
            [cur.labID]: pre[cur.labID] ? [...pre[cur.labID], cur] : [cur]
          }
        }, {})
      }
    }
  };
</script>
